<template>
  <div id="ChooseType" class="choose-type">
    <span class="type-name">{{typename}}：</span>
    <span class="option-item" v-for="item in itemlist" :class="{active:item.value===active}" @click="onOptionClick(item.value)">{{item.text}} </span>
  </div>
</template>
<script type="text/javascript">
export default {
  props: {
    typename: String,
    itemlist: Array,
    active: [String, Number],
    valuename: String
  },
  methods: {
    onOptionClick(v) {
      if (v === this.active) {
        return
      }
      this.$emit('typechanged', this.valuename, v)
    }
  }
}

</script>
<style type="text/css" scoped>
.choose-type {
  line-height: 45px;
}

.choose-type .type-name {
  margin-right: 7px;
}

.choose-type .option-item {
  padding: 0 10px;
  cursor: pointer;
  border-right: 1px solid #7a7a7a;
}

.choose-type .option-item:last-child {
  border-right: none;
}

.option-item.active {
  color: #01378c;
  font-weight: bold;
}

.type-name {
  color: #01378c;
  font-weight: bold;
}

</style>
